<template>
    <div :class="`detail-picture-and-text ${mode}`">
        <div class="title title-color">图文详情</div>
        <div v-if="desc" class="text title-color">{{ desc }}</div>
        <div class="pic">
            <template v-for="(item, idx) in picList">
                <img class="pic-value" :src="item" alt="" :key="idx + '-detail-pic-list'">
            </template>
        </div>
    </div>
</template>

<script>
import { createBaseImageSrc } from '@common/utils';
import ModeMixin from '@common/mixin';
export default {
    name: 'PictureAndText', // 图文详情
    mixins: [ModeMixin],
    props: {
        desc: {
            type: String,
            default: '',
        },
        picList: {
            type: Array,
            detault() {
                return [];
            },
        },
    },
    computed: {
        imageSrc() {
            return item => createBaseImageSrc(item);
        },
    },
};
</script>

<style lang="less">
.detail-picture-and-text {
    .border-line-top();
    background-color: @white;
    .mode-white();
    .title {
        font-size: @shop-font-size-md;
        font-weight: 500;
        .p(@shop-gap-md);
    }
    .text {
        font-size: @shop-font-size;
        .p-h(@shop-gap-md);
        .p-v(@shop-gap);
        color: @text-color;
    }
    .pic {
        width: 100%;
        .flex-column();
        > img {
            width: 100%;
            height: 100%;
            .m(0);
        }
    }
}
</style>
